🚀 4 Bài Tập DOM Nâng Cao

Nâng cao kỹ năng JavaScript DOM với các bài tập thực tế và thú vị

📝 Hướng dẫn:

• Mỗi bài có demo hoạt động và yêu cầu cụ thể cần viết code

• Tên function đã được định sẵn, hãy viết code bên trong

• Không cần LocalStorage, chỉ cần DOM manipulation cơ bản

• Test từng function một để đảm bảo hoạt động đúng

📝 Bài 1: Todo List Manager

Trung bình

📋 Yêu cầu cần làm:

  • addTodo(): Thêm task mới khi nhấn Enter hoặc click nút "Thêm"
  • toggleTodo(id): Đánh dấu hoàn thành/chưa hoàn thành khi click checkbox
  • deleteTodo(id): Xóa task khi click nút 🗑️
  • filterTodos(type): Lọc hiển thị theo "all", "active", "completed"
  • updateTodoCount(): Cập nhật số lượng task chưa hoàn thành
  • clearCompleted(): Xóa tất cả task đã hoàn thành
  • renderTodos(): Hiển thị danh sách todo ra HTML

💡 Gợi ý: Dùng mảng todos = [] để lưu dữ liệu, mỗi todo có {id, text, completed}

Chưa có task nào. Hãy thêm task đầu tiên!

Còn lại: 0 task

👨‍🎓 Bài 2: Student Profile Form

Trung bình

📋 Yêu cầu cần làm:

  • addStudent(): Lấy dữ liệu từ form và thêm vào danh sách
  • renderStudents(): Hiển thị danh sách sinh viên ra HTML
  • deleteStudent(id): Xóa sinh viên khỏi danh sách
  • editStudent(id): Sửa thông tin sinh viên (fill form)
  • clearForm(): Xóa hết dữ liệu trong form
  • validateForm(): Kiểm tra form trước khi submit

💡 Gợi ý: Dùng DOM để lấy value từ input, select. Validate email format với regex

📝 Thông tin sinh viên


📋 Danh sách sinh viên

Chưa có sinh viên nào

🛍️ Bài 3: Product Catalog

Dễ

📋 Yêu cầu cần làm:

  • addProduct(): Thêm sản phẩm mới vào danh sách
  • displayProducts(): Hiển thị tất cả sản phẩm ra HTML
  • filterByCategory(category): Lọc sản phẩm theo danh mục
  • searchProducts(): Tìm kiếm sản phẩm theo tên
  • sortProducts(type): Sắp xếp theo tên hoặc giá
  • deleteProduct(id): Xóa sản phẩm khỏi danh sách
  • clearAllProducts(): Xóa toàn bộ sản phẩm

💡 Gợi ý: Dùng mảng products = [], mỗi product có {id, name, price, category}

➕ Thêm sản phẩm

📦 Danh sách sản phẩm

Chưa có sản phẩm nào

🧭 Bài 4: DOM Navigation & Manipulation

Trung bình

📋 Yêu cầu cần làm:

  • highlightElement(element): Highlight element được click
  • showElementInfo(element): Hiển thị thông tin element (tag, class, id)
  • navigateToParent(): Di chuyển lên element cha (.parentElement)
  • navigateToChild(): Di chuyển xuống element con đầu tiên
  • navigateToNext(): Di chuyển sang element anh em kế tiếp (.nextElementSibling)
  • navigateToPrev(): Di chuyển sang element anh em trước đó (.previousElementSibling)
  • addNewElement(): Thêm element mới vào vị trí hiện tại
  • deleteCurrentElement(): Xóa element hiện tại

💡 Gợi ý: Dùng các thuộc tính DOM như parentElement, children, nextElementSibling

Current Element: Click vào element bên dưới để bắt đầu

Header Level 1

Paragraph 1

Paragraph 2

  • List Item 1
  • List Item 2
  • List Item 3
Span Element

💪 4 Bài Tập Nâng Cao:

Phát triển kỹ năng DOM manipulation và JavaScript với các project thực tế

🚀 Chúc bạn code vui vẻ!